<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta content="telephone=no" name="format-detection" />
	<!-- 留作将来统一添加 -->
	<TEMPLATE>${TEMPLATE}</TEMPLATE>
	<title>模板html</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css">
	<link rel="stylesheet" type="text/css" href="../../css/index.css">
	<link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
	<style type="text/css">
		body {
			background: rgba(245, 245, 245, 1);
		}

		.amount {
			height: 138px;
			background: rgba(255, 255, 255, 1);
			margin-bottom: 10px;
		}

		.amount .money {
			height: 33px;
			font-size: 24px;
			font-weight: 600;
			color: rgba(255, 101, 24, 1);
			line-height: 33px;
			text-align: center;
		}

		.amount .txt {
			height: 20px;
			font-size: 14px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(127, 129, 141, 1);
			line-height: 20px;
			text-align: center;
		}

		.pay-item {
            height: 60px;
            padding: 0 15px;
			background: rgba(255, 255, 255, 1);
		}

		.pay {
            position: relative;
            height: 60px;
        }

        .pay::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 1px;
            background: #DBDEE5;
            transform: scaleY(0.5);
        }

        .pay.first::after {
            display: none;
        }

		.pay .icon {
			width: 30px;
			height: 30px;
			margin-right: 15px;
		}

		.pay .txt {
			height: 20px;
			font-size: 14px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(36, 42, 51, 1);
			line-height: 20px;
		}

		.pay .radio {
			width: 22px;
			height: 22px;
			background-image: url("../../image/ui/radio.png");
			background-size: 100%;
		}

		.pay .checked {
			background-image: url("../../image/ui/checked.png");
		}

		.btn-wrapper {
			position: absolute;
			left: 0;
			bottom: 26px;
			width: 100%;
			height: 44px;
			padding: 0 15px;
		}

		.btn {
			height: 44px;
			background: rgba(253, 155, 67, 1);
			border-radius: 100px;
			font-size: 16px;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			letter-spacing: 1px;
		}
	</style>
</head>

<body>
	<div class="vueApp" v-cloak>
		<div class="amount" data-flex="main:center cross:center">
			<div>
				<div class="money">¥{{ retData.orderTotalAmount }}</div>
				<div class="txt">需支付</div>
			</div>
		</div>
        <div v-if="from == 2 && payMethod == -1">
            <!-- 积分购买视频 -->
            <div class="pay-item">
                <div class="pay" data-flex="cross:center">
                    <img class="icon" class="" src="../../image/ui/money_2.png" alt="">
                    <div class="txt" data-flex-box="1">积分支付</div>
                    <div class="radio checked"></div>
                </div>
            </div>
        </div>
        <div v-else-if="systemType == 'ios' && from != 3 && isApplePay">
            <!-- ios 余额充值和视频购买，不显示支付方式 -->
            <!-- iOS9.2以下不支持Apple Pay -->
        </div>
        <div v-else>
            <!-- 商城商品购买 -->
            <div class="pay-item">
                <div class="pay first" data-flex="cross:center" @click="current = 1">
                    <img class="icon" class="" src="../../image/ui/wechat.png" alt="">
                    <div class="txt" data-flex-box="1">微信支付</div>
                    <div class="radio" :class="{'checked': current === 1}"></div>
                </div>
            </div>
            <div class="pay-item">
                <div class="pay" data-flex="cross:center" @click="current = 2">
                    <img class="icon" class="" src="../../image/ui/alipay.png" alt="">
                    <div class="txt" data-flex-box="1">支付宝支付</div>
                    <div class="radio" :class="{'checked': current === 2}"></div>
                </div>
            </div>
            <div v-if="from == 3" class="pay-item">
                <div class="pay" data-flex="cross:center" @click="current = 4">
                    <img class="icon" class="" src="../../image/ui/money_2.png" alt="">
                    <div class="txt" data-flex-box="1">余额支付</div>
                    <div class="radio" :class="{'checked': current === 4}"></div>
                </div>
            </div>
        </div>
		<div class="btn-wrapper">
			<div class="btn" data-flex="main:center cross:center" onclick="handlePay()">
				去支付¥{{ retData.orderTotalAmount }}
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/service/service-pay.js"></script>
<script type="text/javascript" src="../../script/service/service-sha1.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
	// html 的引号一律为双引号(""),js 为单引号('')
	var USER, $S, vm, pageParam;
	var isPay = false, retUrl = null;
	apiready = function() {
		$S = SERVICE();
		USER = USER();
		console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        pageParam = api.pageParam;
		fnInit();
	};
	// 初始化
	function fnInit() {
		vm = new Vue({
			el: '.vueApp',
			data: {
                current: 1,
                isApplePay: false,
                systemType: api.systemType,
                retData: pageParam.retData,
                // 从什么地方进来进行支付（1:给账户充值 2：购买视频 3：购买商品）
                from: pageParam.from,
                payMethod: pageParam.payMethod // -1 为积分购买视频,无其他值
			}
		});
        fnIsApplePay();
        if(vm.systemType == 'ios' && vm.from != 3 && vm.isApplePay) {
            vm.current = 3;
        }
	}

    function fnIsApplePay() {
        var apple_btn = api.systemType;
        var version = api.systemVersion.split('.')[0];
        // ios9.2以上才支持Apple Pay
        if (apple_btn == 'ios' && version >= 9) {
            vm.isApplePay = true;
        }
    }

	// 支付
	function handlePay() {
		// if(isPay) return;
		isPay = true;
        if(vm.payMethod == -1) {
            // 积分
            isSetPassword(1);
        }else if(vm.current == 4) {
            // 余额
            isSetPassword(2);
        }else {
            handleMoneyPay();
        }
    }

    // 打开输入弹窗
    function apiPrompt(type) {
        api.prompt({
            title: '请输入支付密码',
            type: 'password',
            buttons: ['确定', '取消']
        }, function(ret, err) {
            if(ret && ret.buttonIndex == 1) {
                isSame(type, ret.text);
            }
        });
    }

    // 判断密码是否正确 type 为支付方式  text 为输入的内容
    function isSame(type, text) {
        if(text === '') {
            fnToast('密码不能为空');
            apiPrompt(type);
            return;
        }
        if(text.length !== 6 || Number(text) + '' == NaN + '') {
            fnToast('密码必须为6位纯数字');
            apiPrompt(type);
            return;
        }
        var params = {
            payPassword: SHA1(text)
        };
        var callback = function(data) {
            if(data.type == 1) {
                if(type === 1) {
                    // 积分
                    handleIntelPay();
                } else if(type === 2) {
                    // 余额
                    handleAccountPay();
                }
            } else {
                fnToast('密码错误');
                apiPrompt(type);
            }
        };
        POST('my/comparePayPassword', params, callback);
    }

    // 判断密码是否设置
    function isSetPassword(type) {
        var params = {
            payPassword: ''
        };
        var callback = function(data) {
            if(data.type == 0) {
                fnToast('请先设置支付密码');
                fnOpenPublicWin('修改支付密码','teacher/change_pay_pwd');
            } else {
                apiPrompt(type);
            }
        };
        POST('my/comparePayPassword', params, callback);
    }

    // 微信支付宝苹果
    function handleMoneyPay() {
        var params = {
            orderNo: vm.retData.orderSn,
            payType: vm.from,
            payMethod: vm.current,
            payMoney: vm.retData.orderTotalAmount
        };
        if(retUrl && params.payMethod == 3) {
            fnApplePay(retUrl, vm.retData.orderSn);
            return;
        }
        var callback = function(data) {
            retUrl = data.retUrl;
            if(params.payMethod == 3) {
                fnApplePay(retUrl, vm.retData.orderSn);
            }else if(params.payMethod == 1) {
                // 微信
                fnwxPayPlus(retUrl);
            }else if(params.payMethod == 2) {
                // 支付宝
                fnaliPayPlus(retUrl);
            }
        };
        POST('payOrder/pay', params, callback);
    }

    // 积分购买
    function handleIntelPay() {
        var params = {
            orderSn: vm.retData.orderSn,
            payType: '4'
        };
        var callback = function(data) {
            fnopenAudit(1);
        };
        POST('videos/pointPayVideo', params, callback);
    }

    // 商城余额支付
    function handleAccountPay() {
        var params = {
            orderNo: vm.retData.orderSn,
            payType: '3',
            payMethod: '5',
            payMoney: vm.retData.orderTotalAmount
        };
        var callback = function(data) {
            fnopenAudit(1);
        };
        POST('payOrder/integralOrAccountPay', params, callback);
    }

    // 支付回调
	function fnopenAudit(result) {
	    //1成功 0失败 -1某些情况下支付失败
	    if (result != -1) {
	        fnOpenPublicWin('支付结果', 'video/pay_end',{
	            retUrl: retUrl,
	            from: pageParam.from,
                result: result,
                orderNo: vm.retData.orderSn,
                payMoney: vm.retData.orderTotalAmount,
                orderId: pageParam.id || pageParam.retData.id,
                payMethod: vm.systemType == 'ios' ? '3' : vm.current,
                refreshWin: pageParam.refreshWin,
                refreshFrm: pageParam.refreshFrm
            });
            fnDelayCloseWin(500);
	    }
        if(result == 1) {
            api.execScript({
                name: pageParam.refreshWin,
                frameName: pageParam.refreshFrm,
                script: 'paySuccessCallback('+vm.retData.orderTotalAmount+')'
            });
        }
	}
</script>

</html>